<!-- <!DOCTYPE html>  基本结构
<html>
    <head>
        <meta charset=utf-8>
			<title>我的第一个Three.js案例</title>
		<style>            
			body { margin: 0; }            
			canvas { width: 100%; height: 100% }        
		</style>    
	</head>    
	<body>        
		<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
		<script>            // 在这里书写你的js代码        </script>    
	</body>
</html> 
-->
					
<!DOCTYPE html>
<html>
	<head>
    <meta charset=utf-8>    
	<title>我的第一个Three.js案例</title>    
	<style>        
		body {            
			margin: 0;        
			}        
		canvas {            
			width: 100%;            
			height: 100%;            
			display: block;        
			}    
	</style>
	</head>
	<body onload="init()">
		<!-- <script src="https://cdn.bootcss.com/three.js/92/three.js"></script> -->
		<script src="./three.js"></script>
		<script>    
		//声明一些全局变量    
		var renderer, camera, scene, geometry, material, mesh;  
		  
		//初始化渲染器    
		function initRenderer() {        
			renderer = new THREE.WebGLRenderer(); //实例化渲染器        
			renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高        
			document.body.appendChild(renderer.domElement); //添加到dom    
		}    
		
		//初始化场景    
		function initScene() {        
			scene = new THREE.Scene(); //实例化场景    
		}    
		
		//初始化相机    
		function initCamera() {        
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机        
			camera.position.set(0, 0, 15);
				}    
				
		//创建模型    
		function initMesh() {        
			geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体        
			material = new THREE.MeshNormalMaterial(); //创建材质        
			mesh = new THREE.Mesh( geometry, material );//创建网格        
			scene.add( mesh ); //将网格添加到场景
				}    
				
		//运行动画    
		function animate() {        
			requestAnimationFrame(animate); //循环调用函数        
			mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度        
			mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度        
			renderer.render( scene, camera ); //渲染界面    
			}   
			 
		//初始化函数，页面加载完成是调用    
		function init() {        
			initRenderer();        
			initScene();        
			initCamera();        
			initMesh();        
			animate();    
			}
		</script>
	</body>
</html>					